require('./Getfilepathlist.styl');
const classnames = require('classnames')
const reactMixin = require('react-mixin');
const { List, Boxs, Scroller, Button } = SaltUI;
const { HBox, Box } = Boxs;
import { Control } from 'react-keeper';
const ui = require('clientConfig/util/jsapi/ui');
class Getfilepathlist extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
        this.$self = false;
        this.handleCancle = this.handleCancle.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.handleBack = this.handleBack.bind(this);
        this.handleClickImg = this.handleClickImg.bind(this);
        this.listdata = {};//保存文件目录的列表数据
        this.order = [];//保存文件目录
    }
    //下一级
    handleClick(event, dataItem) {
        event.stopPropagation();
        let index = this.order.findIndex(value => value.folder_id == dataItem.folder_id);
        if (index != -1) return;
        this.order.push({ folder_id: dataItem.folder_id, path_name: dataItem.title });
        this.$self = false;
        if (!(this.listdata.hasOwnProperty(dataItem.folder_id))) {
            this.props.step && this.props.step(dataItem.folder_id, dataItem.title)
        } else {
            this.setState({ data: this.listdata[dataItem.folder_id] }, console.log(this))
        }
    }
    //取消
    handleCancle() {
        let folder_id = this.order[0].folder_id;
        this.order.length = 1;
        this.$self = false;
        let data = this.listdata[folder_id]
        this.setState({ data })
        this.props.handleCancleCb && this.props.handleCancleCb(folder_id);
    }
    //返回上一级
    handleBack() {
        if (this.order.length > 1)
            this.order.splice(this.order.length - 1, 1);
        let data = [...this.listdata[this.order[this.order.length - 1].folder_id]];
        this.$self = true;
        this.setState({ data }, console.log(this.state.data))
    }
    //选中路径
    handleClickImg(e, imgUrl) {
        let id = e.target.offsetParent.id.split("index")[1];
        let folder_id = this.order[this.order.length - 1].folder_id;
        let data = this.listdata[folder_id];
        let title = data[id].title;
        let subfolder_id = data[id].folder_id;
        this.props.pass && this.props.pass({ folder_id: subfolder_id, title })
        this.handleCancle();
    }
    setHeight() {
        if (navigator.userAgent.indexOf('iPhone') != -1) {
            if (window.screen.height == '568') {
                var scrollHeight = "scrollHeight0"//4inch
            } else if (window.screen.height == '667') {
                var scrollHeight = "scrollHeight1"//4.7inch
            } else if (window.screen.height == '736') {
                var scrollHeight = "scrollHeight2"//5.5inch
            }
        } else if (navigator.userAgent.indexOf('Android') != -1) {
            var scrollHeight = "scrollHeight3"
        }
        return scrollHeight;
    }
    render() {
        return (
            <div className={classnames("getfilepathlist", { 'active': this.props.active })} >
                <Scroller className={this.state.data.length > 0 ? this.setHeight() : ''} autoRefresh={true}>
                    {
                        this.state.data.length == 0 ?
                            <div className="t-FAC t-MT25">暂无目录</div> :
                            <List
                                layout="left"
                                hasRightIcon={true}
                                isDelete={false}
                                demoTitle=""
                                data={this.state.data}
                                onClick={this.handleClick}
                                clickPhoto={this.handleClickImg}
                            />
                    }
                </Scroller>
                <HBox vAlign="center" className="t-FAC t-MT20">
                    {this.order.length != 1 && <Box flex={1}  ><Button className="t-MR15 t-ML15 " onClick={this.handleBack}>上一页</Button></Box>}
                    <Box flex={1} ><Button className="t-MR15 t-ML15" onClick={this.handleCancle}>取消</Button></Box>
                </HBox>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        ui.setLeft({ control: true, text: '返回' }, (isSuccessed, result) => {
            if (isSuccessed) {
                if (this.props.active) {
                    if (this.order.length > 1) {
                        this.handleBack();
                    } else if (this.order.length == 1) {
                        this.handleCancle();
                    }
                } else {
                    Control.go(-1);
                }
            }
        })
    }

    componentWillReceiveProps(nextProps) {
        // debugger
        if (!this.$self) {
            if (nextProps.folder_id) {
                if (!(this.listdata.hasOwnProperty(nextProps.folder_id))) {
                    let $index = this.order.findIndex(value => value.folder_id == nextProps.folder_id);
                    if ($index == -1)
                        this.order.push({ folder_id: nextProps.folder_id, path_name: nextProps.path_name });
                }
                this.listdata[nextProps.folder_id] = nextProps.data;
            }
            this.setState({ data: nextProps.data });
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {

    }
}

module.exports = Getfilepathlist;
